;(function (window) {
  const pageTab = {
    template:`<div class="hl-page-tab-container" :style="{ 'height': tabHeight + 'px', 'lineHeight': tabHeight + 'px'}">
        <div
        class="hl-page-tab-item"
        @click="handleSelectedItem(item,index)"
        v-for="(item, index) in tabData"
        v-show=" !item.privilege || privileges.indexOf(item.privilege) > -1 "
        :class="{ 'active': index == tabSelectedIndex && item.disabled != false }"
        :style="{ 'height': tabHeight + 'px', 'lineHeight': tabHeight + 'px'}"
        >
        {{ item.name }}
        </div>
        <p class="hl-page-tab__title">{{title}}</p>
        <slot></slot>
      </div>`,
    data(){
      return {
        tabData:[],
        tabHeight:0,
        tabSelectedIndex:0,
        privileges:[],
        title:null
      }
    },
    props:{
      data:{
        type:Array,
        default:() => []
      },
      height:{
        type:Number,
        default:56
      },
      selectedIndex:{
        type:Number,
        default:0
      },
      prefix:{
        type:String,
        default:''
      }
    },
    components:{

    },
    watch:{
      data(val){
        this.tabData = val
      },
      height(val){
        this.tabHeight = val
      },
      selectedIndex(val){
        this.tabSelectedIndex = val
      }
    },
    mounted(){
      this.tabData = this.data
      this.tabHeight = this.height
      this.tabSelectedIndex = this.selectedIndex
      this.title = this.prefix +  '-' + this.tabData[this.tabSelectedIndex]['name']
      this.privileges = window.localStorage.getItem('permissions') ? JSON.parse(window.localStorage.getItem('permissions')) : []
    },
    methods:{
      handleSelectedItem(val,i){
        // 如果点击项目被禁用 则无法切换 tab 项
        if(this.tabData[i]['disabled'] != false){
          this.tabSelectedIndex = i
          this.title = this.prefix + '-' + this.tabData[i]['name']
        }
        this.$emit('on-item-click',val,i)
      }
    }
  }

  Vue.component('page-tab',pageTab)

} (window))
